<template>
  <scroll-view @scrolltolower="handleToLower" class="recommend_view" scroll-y v-if="recommends.length>0">
    <view class="recommend_wrap">
      <navigator :url="`/pages/album/index?id=${item.target}`" class="recommend_item" v-for="item in recommends" :key="item.id">
        <image mode="widthFix" :src="item.thumb"></image>
      </navigator>
    </view>
    <view class="month_wrap">
      <view class="month_title">
        <view class="info">
          <view class="time">
            <text>{{months.DD}} / </text>{{months.MM}}月
          </view>
          <view class="text">{{months.title}}</view>
        </view>
        <view class="more">更多></view>
      </view>
      <view class="month_content">
        <view class="month_item" v-for="(item,index) in months.items" :key="item.id">
          <go-detail :list="months.items" :index="index">
            <image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
          </go-detail>
        </view>
      </view>
    </view>
    <view class="hots_wrap">
      <view class="hots_title">
        <text>热门</text>
      </view>
      <view class="hots_content">
        <view class="hot_item" v-for="(item,index) in hots" :key="item.id">
          <go-detail :list="hots" :index="index">
            <image mode="widthFix" :src="item.thumb"></image>
          </go-detail>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import moment from 'moment'
import goDetail from '@/components/goDetail'
  export default {
    data() {
      return {
        recommends:[],
        months:[],
        hots:[],
        params:{
          limit:30,
          order:"hot",
          skip:0
        },
        hasMore:true
      }
    },
    components:{
      goDetail
    },
    mounted() {
      this.getList()
      uni.setNavigationBarTitle({title:"推荐"})
    },
    methods: {
      getList(){
        this.request({
          url:'http://157.122.54.189:9088/image/v3/homepage/vertical',
          data:this.params
        }).then(res=>{
          if (res.res.vertical.length===0) {
            uni.showToast({
              title:"没有数据了",
              icon:"none"
            })
            this.hasMore=false
            return
          }
          //console.log(res);
          if (this.recommends.length===0) {
            this.recommends=res.res.homepage[1].items
            this.months=res.res.homepage[2]
            this.months.MM=moment(this.months.stime).format("MM")
            this.months.DD=moment(this.months.stime).format("DD")
          }
          //this.hots=res.res.vertical
          //console.log(this.hots);
          this.hots=[...this.hots,...res.res.vertical]
        })
      },
      handleToLower(){
        if (this.hasMore) {
          this.params.skip+=this.params.limit
          this.getList()
        }else{
          uni.showToast({
            title:"没有数据了",
            icon:"none"
          })
        }
        
      }
    },
  }
</script>

<style lang="scss" scoped>
.recommend_view{
  height: calc(100vh - 36px);
}
.recommend_wrap{
  display: flex;
  flex-wrap: wrap;
  .recommend_item{
    width: 50%;
    padding: 5rpx;
  }
}
.month_wrap {
  .month_title {
    display: flex;
    justify-content: space-between;
    padding: 0 15rpx;
    font-weight: 600;
    .info {
      display: flex;
      color: $color;
      font-size: 30rpx;
      .time {
        margin-right: 15rpx;
        text {
          font-size: 36rpx;
        }
      }

      .text {
        font-size: 34rpx;
        color: $uni-text-color;
      }
    }

    .more {
      font-size: 24rpx;
      color: var(--themeColor);
      display: flex;
      align-items: center;
    }
  }

  .month_content {
    display: flex;
    flex-wrap: wrap;
    .month_item{
      width: 33.33%;
      border: 5rpx solid #fff;
    }
  }
}
.hots_wrap{
  .hots_title{
    padding: 20rpx;
    text{
      border-left: 5rpx solid $color;
      font-size: 24rpx;
      font-weight: 600;
    }
  }
  .hots_content{
    display: flex;
    flex-wrap: wrap;
    .hot_item{
      width: 33.33%;
      padding: 5rpx;
      image{
      }
    }
  }
}
</style>